<template>
	<view class="content">
		<image class="logo" src="/static//images/index/appointment.png" mode="aspectFit"></image>
		<view class="appointment-form">
			<text class="appointment-title">楼盘名称</text>
			<input class="appointment-input" placeholder="请输入楼盘名称"></input>
			<text class="appointment-title">预约类型</text>
			<!-- 样式为appointment-input-box -->
			<!--
			 下面有个这样的数组
			 data() {
			 	return {
			 		index:1,
			 		title: 'Hello 何志强-202165110363',
			 		appointment_types:[
			 			{id:1,type:"验房"},
			 			{id:1,type:"微改报价"},
			 			{id:1,type:"设计"},
			 			{id:1,type:"拎包入住"}
			 		]
			 	};
			 },
			-->
			<!-- range：有哪些选项,底部有段这样的代码 （appointment_types）-->
			 <!-- range-key：把选项里的哪一个东西展示出来（type） -->
			 <!-- value：绑定你当前选择的位置（index） -->
			 <!-- change：当选项发生更改时回调函数（onPickerChange） -->
			<picker class="appointment-input-box" :range="appointment_types" range-key="type" :value="index" @change="onPickerChange">
				<text class="appointment-input-hint">{{appointment_types[index].type}}</text>
				<image class="appointment-input-image" src="../../static/images/icon/right_icon.png"></image>
			</picker>
			<text class="appointment-title">户&emsp;&emsp;型</text>
			<view class="appointment-input-box">
				<input class="appointment-input-hint" placeholder="请输入户型" type="number"></input>
				<text class="appointment-size-unit">(m²)</text>
			</view>
			<text class="appointment-title">姓&emsp;&emsp;名</text>
			<input class="appointment-input" placeholder="请输入姓名"></input>
			<text class="appointment-title">联系方式</text>
			<input class="appointment-input" placeholder="请输入联系方式" type="number"></input>
			<text class="appointment-title">微信电话</text>
			<input class="appointment-input" placeholder="请输入微信电话" type="number"></input>
		</view>
		<button class="submit">提交预约</button>
		
	</view>
</template>

<script>

export default {
	data() {
		return {
			index:1,
			title: 'Hello 周俊-202165110369',
			appointment_types:[
				{id:1,type:"验房"},
				{id:1,type:"微改报价"},
				{id:1,type:"设计"},
				{id:1,type:"拎包入住"}
			]
		};
	},
	onLoad() {},
	methods: {
		onPickerChange(e){
			this.index = e.target.value
		}
	}
};
</script>

<style>
page {
	background-color: #f5f5f5;
}
.content {
	box-sizing: border-box;
	width: 100vw;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.logo {
	height: 450rpx;
	width: 100%;
}
.appointment-form{
	box-sizing: border-box;
	width: 100%;
	display: grid;
	grid-template-columns: 30% 70%;
	padding-right: 40rpx;
	grid-row-gap: 20px;
	margin: 40rpx 40rpx 0 40rpx;
	align-items: center;
}
.appointment-title{
	text-align: center;
	font-size: 32rpx;
	color: #808080;
}
.appointment-input{
	font-family: PingFang SC, PingFang SC-Bold;
	box-sizing: border-box;
	height: 64rpx;
	line-height: 64rpx;
	padding-left: 12rpx;
	padding-right: 12rpx;
	background-color: white;
	border-radius: 8rpx;
	border: 3rpx solid rgba(0,0,0,0.2);
	font-size: 32rpx;
	align-items: center;
}
.appointment-input-box{
	box-sizing: border-box;
	height: 64rpx;
	line-height: 64rpx;
	background-color: white;
	border-radius: 8rpx;
	border: 3rpx solid rgba(0,0,0,0.2);
	font-size: 32rpx;
	position: relative;
	align-items: center;
}
.appointment-input-hint{
	font-family: PingFang SC, PingFang SC-Bold;
	box-sizing: border-box;
	padding-left: 12rpx;
	padding-right: 72rpx;
	position: absolute;
	width: 100%;
	height: 100%;
}
.appointment-input-image{
	position: absolute;
	opacity: 0.4;
	right: 12rpx;
	width: 28rpx;
	height: 28rpx;
	top: 0;
	bottom: 0;
	margin:auto;
}
.appointment-size-unit{
	position: absolute;
	opacity: 0.4;
	right: 12rpx;
	top: 0;
	bottom: 0;
	margin:auto;
	font-weight: 600;
	font-size: 28rpx;
}
.submit{
	width: 328rpx;
	height: 80rpx;
	margin:80rpx;
	font-size: 32rpx;
	font-weight: 500;
	color: #fff;
	background-color: #3D9C36;
}
</style>
